<template>
  <div>
    <div class="box">
<<<<<<< HEAD
      <main>
        <div class="mainLow">
        <router-view></router-view>
        </div>
=======
      <!-- <nav>
        导航头部
      </nav> -->

      <main>
        <router-view></router-view> 
>>>>>>> wang
      </main>

      <footer v-show="flag">
        <ul>
          <li>
            <van-icon name="orders-o" />
            <router-link to="/">优选</router-link>
          </li>
          <li>
            <van-icon name="flag-o" />
            <router-link to="/message">鱼讯</router-link>
          </li>
          <li>
            <router-link to="/newly">
              <van-icon name="plus" />
            </router-link>
          </li>
          <li>
            <van-icon name="comment-o" />
            <router-link to="/news">消息</router-link>
          </li>
          <li>
            <van-icon name="friends-o" />
            <router-link to="/personal">我的</router-link>
          </li>
        </ul>
      </footer>
    </div>


  </div>
</template>

<script>
export default {
  name: 'AppApp',

  data() {
    return {
      flag:true
    };
  },

  mounted() {

  },
  watch: {
        $route(to, from) {
            // to 和 from 都是 路由信息对象
            if(to.path=='/login'){
                this.flag = false
            }
            console.log();
        }
    },

  methods: {

  },
};
</script>

<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;

  main {
    flex: 1;
    overflow-x: hidden;
  }

  footer {
<<<<<<< HEAD
    height: 6%;

    ul {
=======
    height: 5vh;
    border-top: 1px solid gray;
    ul{
>>>>>>> wang
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .van-icon{
          font-size: 18px;
          margin-bottom: 3px;
        }
        .van-icon-plus:before{
          background-color: #fdcc03;
          color: #000;
          font-size: 18px;
          padding: 3px;
          border-radius: 4px;
        }

        a {
          text-decoration: none;
          font-size: 14px;
          color: #363636;
        }
      }
    }
  }
}
</style>